"use strict";

var gl;
var points;

var NumTimesToSubdivide = 5;
var points = [];

window.onload = function init()
{
    //创建WebGl上下文对象
    var canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);

    if (!gl){
        alert("GG");
    }

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    //创建一个程序对象容器
    var program = initShaders(gl, "vertex-shader", "fragment-shader");  //初始化和绑定 定点着色器 片元着色器
                                                                        //定点着色器 片元着色器 是标准文本（字符串），在初始化时编译，并连接到程序对象中

    gl.useProgram(program);

    var vertices = [
        vec2(-1, -1),
        vec2(0, 1),
        vec2(1, -1),
    ];
    //算出顶点
    divideTriangle(vertices[0], vertices[1], vertices[2],
        NumTimesToSubdivide);
    // outputObj(points)
    
    //先GPU发送数据
    var buffer = gl.createBuffer();   //创建一个缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);   //绑定一个缓冲区  参数一是缓冲区顶点的属性，参数二是缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW); //将数据发送到gpu

    var vPosition = gl.getAttribLocation(program, "vPosition");     //返回顶点着色器的属性  着色器中的vPosition  通过下面的方法写入属性 
                                                                    //写入前需要把数据写入buffer(bufferData) 并绑定（bindBuffer）
                                                                    
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0)     //描述顶点着色器的顶点数据形式  第二和第三参数说明vPosition的每一个元素包含2个浮点数
                                                                    //第四个参数表不需要把数据归一化（0到1）
                                                                    //第五个参数表示数据中的数值是连续的
                                                                    //第六个参数表示数据在缓冲区的起始位置

    gl.enableVertexAttribArray(vPosition)                           //开启顶点着色器的属性（使用）

    render();
}

//绘制图形

//绘制过程 必须经过 定点着色器（"vertex-shader"）和 片元着色器 （"fragment-shader"）
//定点着色器 把每一个顶点发送到GPU的光栅化模块中
//片元着色器 决定每一个决定的颜色

function render()
{
    gl.clear(gl.COLOR_BUFFER_BIT);                  //清理缓存

                                                    // 点 线 显示
    // gl.drawArrays(gl.POINTS, 0, points.length)   //点
    // gl.drawArrays(gl.LINES, 0, points.length)      //相邻2点连线
    // gl.drawArrays(gl.LINE_STRIP, 0, points.length)  // 第n点与n+1点连线
    // gl.drawArrays(gl.LINE_LOOP, 0, points.length)   //第n点与n+1点连线 最后n与1连线 闭合


                                                    // 多边形显示（三角形）
    gl.drawArrays(gl.TRIANGLES, 0, points.length)   //相邻3点形成一个三角形
    // gl.drawArrays(gl.TRIANGLE_STRIP, 0, points.length)        //三角条带
    // gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length)        //三角扇形

}

function triangle(a, b, c) {
    points.push(a, b, c);
}


function divideTriangle(a, b, c, count) {
    if (count === 0) {
        triangle(a, b, c);
    }
    else {
        var ab = mix(a, b, 0.5);
        var ac = mix(a, c, 0.5);
        var bc = mix(b, c, 0.5);

        --count;

        divideTriangle(a, ab, ac, count);
        divideTriangle(c, ac, bc, count);
        divideTriangle(b, bc, ab, count);
    }
}

function outputObj(obj) {
	var description = "";
	for (var i in obj) {
		description += i + " = " + obj[i] + "\n";
	}
	alert(description);
}